 document.addEventListener('DOMContentLoaded', () => {
     const scene = document.getElementById('scene');
     const layers = scene.querySelectorAll('.parallax-layer');

     // 定义移动的灵敏度，值越小移动越细腻
     const movementIntensity = 0.03;

     const handleMouseMove = (e) => {
         // 获取窗口中心点
         const centerX = window.innerWidth / 2;
         const centerY = window.innerHeight / 2;

         // 计算鼠标相对于窗口中心的偏移量
         const mouseX = e.clientX - centerX;
         const mouseY = e.clientY - centerY;

         // 遍历所有图层并应用变换
         layers.forEach(layer => {
             const depth = parseFloat(layer.getAttribute('data-depth'));

             // 根据深度和灵敏度计算位移量
             const moveX = mouseX * depth * -movementIntensity;
             const moveY = mouseY * depth * -movementIntensity;

             layer.style.transform = `translate3d(${moveX}px, ${moveY}px, 0)`;
         });
     };

     const resetLayers = () => {
         layers.forEach(layer => {
             // 立即归位，不使用动画
             layer.style.transition = 'none';
             layer.style.transform = 'translate3d(0, 0, 0)';

             // 强制浏览器重绘以应用无过渡的变换
             // 这行是防止在恢复transition时，归位动作也产生动画
             layer.offsetHeight;

             // 恢复过渡效果
             layer.style.transition = 'transform 0.3s ease-out';
         });
     }

     // 使用 requestAnimationFrame
     let frameId = null;
     document.addEventListener('mousemove', (e) => {
         if (frameId) {
             cancelAnimationFrame(frameId);
         }
         frameId = requestAnimationFrame(() => {
             handleMouseMove(e);
         });
     });

     // 当窗口大小变化时，重置图层位置以防止错位
     window.addEventListener('resize', resetLayers);
 });